<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>04.form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
    <link rel="stylesheet" type="text/css" href="css/Ext.ux.form.ExtendedComboBox.css"/>
    <link rel="stylesheet" type="text/css" href="css/Ext.ux.form.SearchBox.css"/>

    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript" src="js/Ext.ux.form.ExtendedComboBox.js"></script>
    <script type="text/javascript" src="js/Ext.ux.form.SearchBox.js"></script>

    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.BLANK_IMAGE_URL = "s.gif";

            var data = [];
            for (var i = 0; i < 500; i++) {
                data.push([i, "Option " + i, i % 10]);
            }

            var store = new Ext.data.ArrayStore({
                autoDestroy:true,
                fields:['value', 'name', 'group'],
                data:data
            });


            new Ext.form.ComboBox({
                renderTo:'form1',
                store:new Ext.data.ArrayStore({
                    autoDestroy:true,
                    fields:['value'],
                    data:[
                        [0],
                        [1],
                        [2],
                        [3],
                        [4],
                        [5],
                        [6],
                        [7],
                        [8],
                        [9]
                    ]
                }),
                displayField:'value',
                valueField:'value',
                mode:'local',
                forceSelection:true,
                triggerAction:'all',
                listeners:{
                    select:function (combo, r, index) {
                        combo.isSelected = true; // 避免是通过输入字符选择的
                        var value = r.get(combo.valueField);
                        combo.setSecondCombo(value);

                    },
                    change:function (combo, newValue, oldValue) {
                        if (!combo.isSelected) {
                            combo.setSecondCombo(newValue);
                        }
                    },
                    collapse:function (combo) {
                        combo.isSelected = false;
                    }
                },
                setSecondCombo:function (value) {
                    box.preFilter = function (record) {
                        return record.get('group') == value;
                    }
                    box.setValue('');
                }
            });

            var box = new Ext.ux.form.ExtendedComboBox({
                renderTo:'form2',
                width:200,
                store:store,
                displayField:'name',
                valueField:'value',
                mode:'local',
                singleSelect:false,
                preFilter:null
            });

            new Ext.Button({
                renderTo:'buttons',
                text:'Get Values',
                handler:function () {
                    Ext.MessageBox.show({title:'你选择的值是：', msg:box.getValue()});
                }
            });


        });
    </script>
</head>
<body>


普通下拉框:
选择后会关联过滤下面的下拉框
<div id="form1" style="margin:20px;"></div>
带多选的下拉框：
<div id="form2" style="margin:20px;"></div>
<div id="buttons" style="margin:20px;"></div>
<div id="info" style="margin:20px;"></div>
</body>
</html>